<template>
  <div class="box">
    <Header class="header" />
    <!-- <Search class="search" /> -->
    <Banner />
    <div class="content-box">
      <Content />

      <!-- <Nav /> -->
      <!-- <Books class="books" type="hot" /> -->
      <!-- <Books class="books" type="new" /> -->
    </div>
    <!-- <MyFooter class="myFooter" /> -->
    <dibu class="dibu" />
  </div>
</template>

<script>
import Header from "../components/Header";
// import Search from "../components/Search";
import Content from "../components/Content";
import Banner from "../components/Banner";
import dibu from "../components/dibu.vue";
// import dibu from "../components/dibu";

export default {
  name: "Home",
  components: {
    Header,
    Banner,
    Content,
    dibu,
    // dibu
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.header {
  position: fixed;
  top: -0.1rem;
  left: 0;
  z-index: 100;
  background-color: #fff;
}
/* .search{
  position: fixed;
  top:0;
  left:0;
} */

.content-box {
  margin-top: 0.1rem;
  /* padding-top:1.1rem; */
  padding-bottom: 0.55rem;
}

.books {
  margin-top: 0.1rem;
}

.myFooter {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>
